<template>
  <Modal
    v-model:active="joinMesherOpen"
    transfer
    title="合并"
    hide-mask
    draggable
    :no-footer="true"
    @close="handleCancel"
    :width="500"
  >
    <div class="title">
      <div class="title_color"></div>
      <div class="title_content">选择器</div>
    </div>
    <div class="selector-buttons">
      <span class="selector-button active">
        单元边
      </span>
      <button class="icon-button" @click="handleClear">
        <img
          src="../../assets/delete.svg"
          alt=""
          class="icon imgStyle"
        />
      </button>
    </div>
    <div class="foot-box">
      <Button type="primary" @click="handleCreate">合并</Button>
      <Button type="default" @click="handleCancel">取消</Button>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import {
  Modal,
  Button,
  Toast,
} from "cax-ui";
import { watch } from "vue";
import { storeToRefs } from "pinia";
import { _global } from "@/UI/store";
import { STATUS_CODE } from "@/FrontProcessing";
import { useRightMeshEditStore } from "@/UI/store/rightMeshEditStore";

const rightMeshEditStore = useRightMeshEditStore();
const { joinMesherOpen } = storeToRefs(rightMeshEditStore);

function handleCreate() {
  Toast.loading({ content: "合并中", duration: 0 });
  _global.Engine.mesh.joinMesher().then((res) => {
    console.log('join mesher res: ', res)
    Toast.close()
  }).catch(err => {
    Toast.close()
  })
}

function handleClear() {
  _global.Engine.selector.clearAll()
  _global.Engine.state.set('Mode', STATUS_CODE.MESH_EDGE)
}

function handleCancel() {
  _global.Engine.selector.clearAll()
  joinMesherOpen.value = false;
}

watch(joinMesherOpen, (open) => {
  if (open) {
    _global.Engine.state.set('Mode', STATUS_CODE.MESH_EDGE)
  } else {
    _global.Engine.state.set('Mode', STATUS_CODE.NORMAL)
  }
});
</script>
<style scoped>
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.foot-box {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  text-align: right;
}
.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-button {
  display: inline-block;
  height: 32px;
  width: 160px;
  padding: 0 16px;
  border: 1px solid #ccc;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  height: 32px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid #ccc;
  border-left: none;
  cursor: pointer;
  background-color: #fff;
}
.icon-button:hover {
  background-color: var(--vxp-color-warning-opacity-7);
}
.imgStyle {
  height: 100%;
}
</style>
